<template>
  <div>
    <div class="investmentAnalysisAadar">
      <div class="radar-charts"
           ref="chartTwo"
           style="height: 229px;width: 100%;">
      </div>
    </div>
  </div>
</template>

<script>
  //执行成功
  const ERROR_CODE = "ERRORCODE0000";
  //Vuex公共状态动作
  export default {
    name: 'RadarChart',
    props: ['data'],
    data() {
      return {
      };
    },
    mounted() {
      this.createChartOne();
    },
    watch: {
      'data.data': function(val) {
        this.createChartOne()
      },
      deep: true
    },
    methods: {
      //画折线图
      createChartOne() {
        let chartone = this.$echarts.init(this.$refs.chartTwo);
        let indindicator_data = [];
        let series_value = [];
        let title = '';
        if(this.data.data.length>0){
          indindicator_data = this.data.data;
          this.data.data.forEach(item => {
            series_value.push(item.value);
          })
          title = this.data.title;
        }else {
          indindicator_data=[
            { name: '', max:100,min:0,value:0},
            { name: '', max:100,min:0,value:0},
            { name: '',max:100,min:0,value:0},
            { name: '', max:100,min:0,value:0},
            { name: '', max:100,min:0,value:0},
            { name: '', max:100,min:0,value:0},
          ]
          indindicator_data.forEach(item => {
            series_value.push(item.value);
          })
        }
        chartone.setOption({
          title: {
            text: title,
            textStyle:{
              fontSize:12
            },
            left:'center'
          },
          legend: {
            data: []
          },
          radar:
            {
              indicator: indindicator_data/*[
                { name: '营收款欠款比率', max:0,min:-5},
                { name: '收入增长率',max:100,min:0},
                { name: '资产报酬率', max:100,min:0},
                { name: '代垫电费欠款比率', max:0,min:-5},
                { name: 'EBITDA率', max:0,min:-100},
                { name: '利润贡献率', max:100,min:-1}
              ]*/,
              splitArea: {
                areaStyle: {
                  color: ['rgba(250,250,250,0.3)',
                    '#f7f7f7', '#f7f7f7',
                    'rgba(250,250,250,0.3)',],
                }
              },
              shape: 'rect',
              center: ['50%', '60%'],
              radius: 88,
              splitNumber: 5,
              name: {
                formatter: '{value}',
                textStyle: {
                  color: '#666666'
                }
              },
            }
          ,
          series:
            {
              name: '成绩单',
              type: 'radar',
              areaStyle: {},
              data: [
                {
                  value: series_value/*[-3.5, 28, 45, -2, -39,20]*/,
                  name: '李四',
                  // label: {
                  //   normal: {
                  //     show: true,
                  //     formatter: function (params) {
                  //       return params.value;
                  //     }
                  //   }
                  // }
                }
              ],
              tooltip: {
                trigger: 'item'
              },
            }
        });
        window.addEventListener("resize", () => {
          chartone.resize();
        });
      },
    },
  }
</script>


<style lang="scss" scoped>
  .investmentAnalysisAadar {
    margin: 11px 14px 11px;
    padding: 0px 9px 12.5px;
    background: #fff;
  }
  .investmentAnalysisAadarOne{
    background: #fff;
  }
</style>
